<template>
	<view class="container">
		<view class="bg">
			<form @submit="formSubmit" @reset="formReset">
				<tui-list-cell :hover="false" class="tui-list-cell tui-list-cell-bg">
					<view class="tui-line-cell">
						<view class="tui-title withdraw-title">充值金额（元）</view>
						<view class="case_box_des" style="border-bottom: 1rpx solid #CCC !important;">
							<view class="case_box_fuhao"> 
								￥					
							</view>
							<view class="case_box_right">
								<!-- :value="toAmount(balanceInfo.balance)" -->
								<!-- <input  v-model="amountFee" class="tui-input" name="amount" type="number" placeholder-style="color:#000"/> -->
								<input @input="oninput" maxlength="8" class="tui-input" name="amount" placeholder="0.00"  min="0" v-model="amountFee" max="99999"  type="digit" placeholder-style="color:#000"/>
								<!-- <input @input="oninput" v-model="amountFee" type="digit"/> -->
								<!-- {{amountFee}} -->
							</view>
						</view>
						<!-- <view class="withdraw-tips" style="padding: 45rpx 0 !important;color: #000 !important;">
							服务费：{{servicecharge}}元，需要支付：{{Therealamount}}元
						</view> -->
						<view class="withdraw-tips" style="padding: 45rpx 0 !important;color: #000 !important;">
							最高充值金额：{{recharge_max_limit / 100}}元，最低充值金额：{{recharge_min_limit / 100}}元
						</view>
						<view class="withdraw-tips">
							充值需支付1%的服务费（含微信官方0.6%交易费用）
						</view>
					</view>
				</tui-list-cell>
				<view class="tui-btn-box">
					<button class="btn-primary btnPrimary" disabled v-if="amountFee == 0" hover-class="false" formType="submit">确 定</button>
					<button class="btn-primary" v-else hover-class="false" formType="submit">确 定</button>
					
				</view>
	<!-- 			<view class="tui-btn-box">
					<view class="btn-detailed" >收支明细</view>
				</view> -->
			</form>
		</view>
<!-- 		<view class="header">
			<view class="title">温馨提示</view>
			<view class="sub-title"><view class="tui-badge-dot tui-blue"></view>每次提现金额需要≥{{toAmount(balanceInfo.deposit_min_limit)}}元，每日限额{{toAmount(balanceInfo.deposit_day_balance_max_limit)}}元。</view>
			<view class="sub-title"><view class="tui-badge-dot tui-blue"></view>提现有时可能需要等待，如有疑问可
			<tui-icon name="kefu" size="20" color="#0a8fe2"></tui-icon><button open-type="contact" session-from="weapp" class="tui-btn" :data-id="index">咨询客服</button>
			
			</view>
			<view class="sub-title"><view class="tui-badge-dot tui-blue"></view>了解更多信息请阅读 <text class="header-tip" @tap="details('../index/details?id=2')">《用户协议》</text>。</view>
		</view> -->
		
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->
	</view>
</template>

<script>
	const form = require("../../components/utils/formValidation.js")
	import tuiButton from "@/components/button/button"
	import tuiBadge from "@/components/badge/badge"
	import tuiIcon from "@/components/icon/icon"
	import tuiToast from "@/components/extend/toast/toast"
	
	export default {
		components: {
			tuiButton,
			tuiBadge,
			tuiIcon,
			tuiToast
		},
		data() {
			return {
				balanceInfo: {balance:0,deposit_max_limit:0},
				amountFee: '',
				cardholder: '',
				servicecharge: '0.00',
				Therealamount: '0.00',
				recharge_max_limit: "200000",
				recharge_min_limit: "10000",
			}
		},
		onLoad:function() {
			this.loadData();
		},
		onShow: function(){
			this.cardholder = uni.getStorageSync('cardholder');
			let publicConif = uni.getStorageSync('publicConif');
			this.recharge_max_limit = publicConif.pay_config.recharge_max_limit;
			this.recharge_min_limit = publicConif.pay_config.recharge_min_limit;
		},
		// watch:{
		// 	amountFee(nv,ov){
		// 		console.log(11111,nv,ov)
		// 		if(String(nv)==='00'){
		// 			console.log(222222,nv)
		// 			setTimeout(() => {
		// 				this.amountFee=0;
		// 			}, 100);
		// 		}
				
		// 	}
		// },
		methods: {
			oninput: function(e){
				// var valuenum = e.detail.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
				// valuenum = valuenum.replace(/^(00|0\d)/,'');
				
				var goods_price_fen = e.detail.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
				goods_price_fen = goods_price_fen.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
				goods_price_fen = goods_price_fen.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				goods_price_fen = goods_price_fen.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
				if (goods_price_fen.indexOf(".") < 0 && goods_price_fen != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
					goods_price_fen = parseFloat(goods_price_fen);
				}
				
				setTimeout(() => {
					this.amountFee = goods_price_fen;
				}, 100);
			},
			allAmount: function(){
				let that = this;
				that.amountFee= that.toAmount(this.balanceInfo.balance);
			},
			loadData: function(){
				let that = this;
				that.tui.request('user/account', {}).then((res) => {
					that.balanceInfo = res;
					// that.amountFee= that.toAmount(res.balance);
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					that.$refs.toast.show(params);
				})
				
			},
			toAmount: function(amount){
				let fee = this.tui.centsToYuan(amount);
				return fee.toFixed(2)
			},
			payment: function(){
				
				let that = this;
					
				that.tui.request('user/recharge',{
					'amount' : this.amountFee * 100
				}).then((res) => {
					this.modal = false
					if(res.code == '0000'){
						console.log(res.payInfo);
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.payInfo.timeStamp,
							nonceStr: res.payInfo.nonceStr,
							package: res.payInfo.package,
							signType: res.payInfo.signType,
							paySign: res.payInfo.paySign,
							success: function (res) {
								console.log(res);
								if(res.errMsg == 'requestPayment:ok'){
									let params = {
										title: '支付成功',
										imgUrl: "/static/toast/check-circle.png",
										icon: true
									};
									that.$refs.toast.show(params);
									setTimeout(function() {

										wx.navigateBack({
											delta: 1
										})
									}, 2000);
								}else{
									setTimeout(function() {
										uni.navigateTo({
											url: '/pages/my/recharge'
										});
									}, 2000);
								}
							
							},
							fail: function (err) {
								console.log(err);
								let params = {
									title: '支付失败',
									imgUrl: "/static/toast/fail-circle.png",
									icon: true
								};
								that.$refs.toast.show(params);
							}
						});
					}else{
						let params = {
							title: res.msg,
							imgUrl: "/static/toast/fail-circle.png",
							icon: true
						};
						that.$refs.toast.show(params);
					}
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					that.$refs.toast.show(params);
				})
			},
			formSubmit: function(e) {
				//表单规则
				let that = this;
				let rules = [
				{
					name: "amount",
					rule: ["required", "isAmount"],
					msg: ["请填写充值金额", "请填写正确的金额"]
				}
				];
				//进行表单检查
				if (that.amountFee) {
					if((that.amountFee * 100) < that.deposit_min_limit){
						let params = {
							title: "最低充值金额"+ that.deposit_min_limit / 100 +'元',
							imgUrl: "/static/toast/info-circle.png",
							icon: true
						};
						that.$refs.toast.show(params);
						return false
					}
					
					if((that.amountFee * 100) > that.deposit_max_limit){
						let params = {
							title: "超出最大充值金额"+ that.deposit_max_limit / 100 +'元',
							imgUrl: "/static/toast/info-circle.png",
							icon: true
						};
						that.$refs.toast.show(params);
						return false
					}
		
					that.payment(e);
				} else {
					let params = {
						title: '请提交正确金额',
						imgUrl: "/static/toast/info-circle.png",
						icon: true
					};
					that.$refs.toast.show(params);
				}
			},
			details: function(url){
				if(!url){
					return false;
				}
				uni.navigateTo({
					url: url
				})
				
			},
			
		}
	}
</script>

<style>
	@import '../../static/style/thorui.css';
	.container {
		box-sizing: border-box;
	}
	.bg{
		padding: 40rpx 30rpx 20rpx 30rpx;	
		background: #FFFFFF;
	
	}
	.header {
		padding: 80rpx 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}
	
	.title {
		font-size: 34rpx;
		color: #000;
		font-weight: 500;
		padding-bottom: 20rpx;
	}
	.sub-title {
		font-size: 24rpx;
		color: #999999;
		padding-left: 18rpx;
	}
/* 	.balance-title{
		font-size: 30rpx;
		font-weight: 400;
		margin: 30rpx auto;
		color: #000000;
	} */
	.tui-list-cell{
		margin: 20rpx auto;
	}
	.tui-list-cell-bg{
		border-radius: 15rpx;
		background: #f7f7f7;
	}
	.phcolor{
		color: #000 !important;
	}
/* 	.tui-btn-bloc{
		background: #0A8FE2 !important;
	} */
	.btn-primary {
		border-radius: 10rpx !important;
		background: #0A8FE2 !important;
		font-size: 30rpx !important;
	}
	.tui-btn-box{
		margin: 60rpx auto;
	}
/* 	.btn-detailed{
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 28rpx;
		color: #0A8FE2;
		
	} */
	.header-tip{
		color: #0A8FE2;
		padding-left: 10rpx;
	}
	.tui-btn {
		background: none;
		padding: 0;
		margin: 0;
		display: inline;
		/* background: red; */
		height: 24rpx;
		font-size: 24rpx;
		color: #0A8FE2;
	}
	.tui-badge-dot{
		background: #999999 !important;
		margin-right: 10rpx !important;
		height: 12rpx !important;
		width: 12rpx !important;
	}
	.tui-input{
		height: 100rpx !important;
		font-size: 50rpx !important;
		/* background: red !important; */
	}
	.tui-input-people{
		font-size: 30rpx;
	}
	.tui-list-cell::after {
		border-bottom: 1rpx solid #FFFFFF;
	}
	.withdraw-tips{
		font-size: 26rpx;
		color: #999999;
		padding-right: 10rpx;
	}
	.withdraw-title{
		color: #999999 !important;
		margin-top: 30rpx ;
		margin-bottom: 70rpx;
		font-size: 30rpx;
		
	}
	.withdraw-amat{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.case_box_des {
		width: 100%;
		/* padding: 10rpx 20rpx; */
		padding: 30upx 0upx;
		margin: 10rpx auto;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 25rpx;
	}

	.case_box_fuhao{
		padding-left: 5rpx;
		color: #000000;
		font-size: 30rpx;
	}
	.case_box_name{
		font-size: 30rpx;
		min-width: 90rpx;
		color: #999999;
		padding-right: 10rpx;
	}

	.case_box_right{
		font-weight: 550;
		width: 100%;
	}
	.tui-list-cell-people{
		height: 100rpx;
		border-radius: 10rpx;
		background: #f7f7f7 !important;
	}
	.btnPrimary{
		background: #CCCCCC !important;
		color: #FFFFFF !important;
	}
	.tui-line-cell{
		width: 100%;
	}
</style>
